<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="app">
    <h1>演示缓存路由，切换不重新渲染！</h1>
    <router-link to='/cache'>缓存1</router-link>
    <router-link to='/cache2'>缓存2</router-link>
    <div style="width: 950px;margin: 0 auto;">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
  <script src="lib/vue.js"></script>
  <script src="lib/vue-router_3.0.2.js"></script>
  <script>
    const component = {
      template:`<div><label for='input1'>A-缓存路由：</label><input id='input1' type='text'/></div>`
    }
    const component2 = {
      template:`<div><label for='input2'>B-缓存路由：</label><input id='input2' type='text'/></div>`
    }
    const router = new VueRouter({
      routes:[
        {
          path:'/cache',
          component
        },
        {
          path: '/cache2',
          component: component2
        }
      ]
    });
     const app = new Vue({
         el: "#app",
         data:{},
         methods:{},
         router
     })
  </script>
</body>
</html>